import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {filter} from 'rxjs-compat/operator/filter';

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {


  str: number;

  value: string = 'test';

  classValue: string;

  flags: boolean = false;

  isDev: boolean = false;

  classes: any = {
    a: false,
    b: false,
    c: false
  };

  constructor() {
  }

  ngOnInit() {
    /**/
    for (let i: number = 0; i < 1150; i++) {
      this.doSomething(i);
    }
  }

  doSomething(i: number): void {
    setTimeout(() => {
      this.str = 5 * i + 1;
      this.classValue = 'a b c';
    }, 5 * i * 1000 + 1000);
    setTimeout(() => {
      this.str = 5 * i + 2;
      this.flags = true;
    }, 5 * i * 1000 + 2 * 1000);
    setTimeout(() => {
      this.str = 5 * i + 3;
      this.classes = {
        a: false,
        b: false,
        c: true
      };
    }, 5 * i * 1000 + 3 * 1000);
    setTimeout(() => {
      this.str = 5 * i + 4;
      this.isDev = true;
      this.classes = {
        a: false,
        b: true,
        c: true
      };
    }, 5 * i * 1000 + 4 * 1000);
    setTimeout(() => {
      this.str = 5 * i + 5;
      this.classes = {
        a: true,
        b: true,
        c: true
      };
    }, 5 * (i + 1) * 1000);
  }

  onClickMe(event: any) {
    console.log('点我');
    console.log(event);
  }

  onInputClick(event: any) {
    /*Dom节点属性，可改变*/
    console.log(event.target.value);
    /*Html属性，不可更改*/
    console.log(event.target.getAttribute('value'));
  }
}
